<template>
<!--<el-button type="warning" plain icon="Download" @click="handleOut">导出</el-button>-->
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin: 20px 0"
    >
      <el-table-column prop="target" label="目标" width="180" />
      <el-table-column prop="totalScore" label="O分值" width="180" />
      <el-table-column prop="keyResult" label="关键结果" />
      <el-table-column prop="keyWeight" label="KR权重" width="80"/>
      <el-table-column prop="beginTime" label="开始日期" width="100"/>
      <el-table-column prop="endTime" label="截止日期" width="100"/>
      <el-table-column prop="name" label="责任人" width="100"/>
      <el-table-column label="备注" width="100"/>
    </el-table>
</template>

<script setup>
import {ref, onMounted,onBeforeMount, reactive} from "vue";
import {getOkrRuleList} from '@/api/api'

const tableData=ref()
onBeforeMount(()=>{
    let empId=4
    getOkrRuleList({empId}).then(data=>{
        
        tableData.value=data.data;
    })
})

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (columnIndex === 0 || columnIndex === 1 ) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      };
    } 
    else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
}

</script>
<style lang="scss" scoped>
.chapter{
    width: 300px;
    height: 300px;
    background-image: url("@/assets/chapter.png");
    background-size: contain;
    position: absolute;
    top: 160px;
    right: 50px;
}
:deep(.my-label) {
  background:#005B99 !important;
  color: #fff !important;
}
:deep(.my-content) {
  background:#4e88ca !important;
  color: #fff !important;
}
.formWrapper{
    width: 100%;
    border: 2px solid #DCDFE6;
    margin: 20px 0;
    border-radius: 5px;
    .formTitle{
        height: 50px;
        font-weight: bold;
        color: #303133;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        border-bottom: #DCDFE6 1px solid;
    }

    .form{
        width: 800px;
        margin: 20px auto;
        border-radius: 5px;
        .title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .title_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #337ECC;
                text-align: center;
                color: #fff;
                line-height: 50px;
                font-size: 20px;
            }
        }
        .centent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .centent_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #79bbff;
                color: #fff;
                padding: 5px;
                line-height: 40px;
                text-align: center;
            }
        }
    }
    .button{
        width: 200px;
        height: 40px;
        margin: 10px auto;
        float: right;
    }
}
</style>
